<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8" />
<title>管理介面</title>
<!-- mobile viewport optimisation -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- stylesheets -->
<link rel="stylesheet" href="css/base.min.css" type="text/css" />
<link rel="stylesheet" href="css/central.css" type="text/css" />
<!--[if lte IE 7]>
    <link rel="stylesheet" href="css/iehacks.min.css" type="text/css"/>
    <![endif]-->
<!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <![endif]-->
</head>
<body>
	<div class="ym-wrapper">
		<div class="ym-wbox">
			<header>設定</header>
			<div class="ym-grid">
				<div class="ym-form">
					<!-- form row wrapper -->
					<div class="ym-fbox">
						<div class="">
							<table>
								<tr>
								<td>獲勝機率</td>
								<td><input type="text" id="win_possibillity" value="" /></td>
								<td><button class="ym-button" id="updatePoss">更新</button></td>
								</tr>
							</table>
						</div>
						<span class="ym-label">獎項設定</span>
						<div class="">
							<button class="ym-button ym-gr" id="refshBtn">重新整理</button>
							<table>
								<thead>
									<tr>
										<th>編號</th>
										<th>圖片</th>
										<th>名稱
											<button id="upName">更新</button>
										</th>
										<th>數量</th>
										<th></th>
									</tr>
								</thead>
								<tbody>
									<?php
for ($i=1; $i<=50; $i++) {
	echo '<tr>
		<td><span id="p'.$i.'-id">'.$i.'</span></td>
        <td><div class="slotcss" style="background-position:0 '. ($i)*193 .'px;"></div></td>
        <td><input type="text" id="p'.$i.'name" /></td>
        <td><input type="text" id="p'.$i.'amount" value="0" /></td>
	<td><button class="ym-button update" data-id="'.$i.'">更新</button></td>
	</tr>';
}
?>
								</tbody>
							</table>
						</div>
						<div class=""></div>
					</div>
				</div>
			</div>

		</div>
	</div>
	<script src="js/jquery.min.js"></script>
	<script>
	var $serverurl = '';
	$(function() {
	    sync();
	    $(".update").live("click", function() {
		var id = $(this).data('id');
		var amount = $('#p' + id + "amount").val();
		updateName();
		$.ajax({
		    url : $serverurl + "/prize/save/" + id + "/" + amount,
		    type : "GET",
		    dataType : "json",
		    error : function() {
			alert("更新失敗");
		    },
		    success : function(json) {
			alert("更新成功");
			sync();
		    }
		});
	    });
	    $('#refshBtn').live("click", function() {
		sync();
	    });
	    $('#upName').live("click", function() {
		updateName();
	    });
	    $('#updatePoss').live("click", function() {
		updatePoss();
	    });

	});

	function updateName() {
	    var names = [];
	    names[0] = null;
	    for (var i = 1; i <= 50; i++) {
		names[i] = $("#p" + i + "name").val();
	    }
	    $.ajax({
		url : $serverurl + "/postPrizeName",
		type : "POST",
		//data: JSON.stringify({datas:names}),
		data : JSON.stringify({
		    names : names
		}),
		contentType : 'application/json',
		error : function() {
		    alert('更新名稱失敗!');
		},
		success : function() {
		    alert('更新名稱成功!');
		}
	    });
	}

	function sync() {
	    $.ajax({
		url : $serverurl + "/prize",
		type : "GET",
		dataType : "json",
		error : function() {
		    alert('更新失敗!');
		},
		success : function(response) {
		    asign_prize(response);
		    get_name();
		    get_winposs();
		}
	    });
	}

	function get_name() {
	    $.ajax({
		url : $serverurl + "/prizeName",
		type : "GET",
		dataType : "json",
		error : function() {
		    alert('更新失敗!');
		},
		success : function(response) {
		    asign_name(response);
		}
	    });
	}

	function asign_prize(prize) {
	    $.each(prize, function(key, value) {
		$("#p" + key + "amount").val(value.amount);
	    });
	}

	function asign_name(res) {
	    $.each(res.names, function(k, v) {
		$("#p" + k + "name").val(v);
	    });
	}
	
	function get_winposs() {
	    $.ajax({
		url : $serverurl + "/winPoss",
		type : "GET",
		dataType : "json",
		error : function() {
		    alert('更新失敗!');
		},
		success : function(response) {
		    asign_winposs(response);
		}
	    });
	}

	function asign_winposs(res) {
		$("#win_possibillity").val(res.winposs);
	}
	
	function updatePoss() {
	    var names = [];
	    names[0] = null;
	    for (var i = 1; i <= 50; i++) {
		names[i] = $("#p" + i + "name").val();
	    }
	    $.ajax({
		url : $serverurl + "/postWinPoss",
		type : "POST",
		//data: JSON.stringify({datas:names}),
		data : JSON.stringify({
		    winposs : $("#win_possibillity").val()
		}),
		contentType : 'application/json',
		error : function() {
		    alert('設定機率失敗!');
		},
		success : function() {
		    alert('設定機率成功!');
		}
	    });
	}
    </script>
</body>
</html>
